<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1">
</head>
<style>
    *{
        padding:0;
        margin:0;
    }

    .top{
        display: flex;
        font-size: 14px;
        justify-content: center;
        padding-top: 30px;
        background: #f2f2f2;
        padding-bottom: 20px

    }
    .top_li{
        text-align: center;
        position: relative;
        width: 22px
    }
    .red{
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #ccc;
        margin:0 auto;
        margin-top: 25px;
    }
    .name{
        position: absolute;
        width: 70px;
        left: -24px;
        top: 0;
        color:#666;
    }
    .xian{
        width: 130px;
        height: 2px;
        background:#ccc;
        margin-top: 25px;
    }
    .name.active{
        color:red;
    }
    .red.active{
        background: red
    }
    .xian.active{
        background: red
    }
    page{
        background: #fff
    }
    .cont{
        /*	padding:30px;
            box-sizing: border-box;*/

    }
    .cont .tip{
        font-size: 14px;
        padding: 20px;
    }
    .duanxin{
        display: flex;
        align-items: center;
        background: #f2f2f2;
        padding: 0 20px;
        justify-content: space-between;
    }
    .duanxin .dx_tit{
        font-size: 14px;
        color:#666;
    }
    .duanxin .dx_input{
        width: 50%
    }
    .duanxin .dx_input input{
        border:0px;
        padding-left: 30px;
        height: 60px;
        width: 100%;
        background: #f2f2f2;
        outline: none;
    }
    .duanxin .dx_btn{
        border:1px solid red;
        padding:5px 10px;
        border-radius: 5px;
        color:red;
        font-size: 12px
    }
    .next_btnk{
        position: fixed;
        left: 0;
        bottom: 0;
        padding:20px;
        box-sizing: border-box;
        width: 100%
    }
    .next_btnk .next_btn{
        width: 100%;
        background: red;
        color:#fff;
        text-align: center;
        padding:10px;
        box-sizing: border-box;
        border-radius: 20px
    }
    .tanchuang{
        width: 200px;
        text-align: center;
        background: rgba(0,0,0,0.7);
        color:#fff;
        border-radius: 10px;
        font-size:14px;
        padding:10px 0;
        margin:0 auto;
        margin-top: 50px;
        display: none
    }
    .model_k{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:rgba(0,0,0,0.4);
        z-index: 0;
        /*display: none;*/
    }
    .model{
        width: 100%;
        position: absolute;
        top: 40%;
        display: flex;
        justify-content:center;
        z-index: 11
    }
    .model_val{
        background: #fff;
        width: 80%;
        border-radius: 10px;
        font-size: 14px
    }
    .model_val .model_tit{
        text-align: center;
        padding:15px;
        color:#333;
        font-weight: bold;
    }
    .model_val .model_tip{
        padding:0 15px;
        color:#666;
    }
    .model_btn{
        margin-top: 15px;
        display: flex;
    }
    .model_btn .mbtn{
        width: 50%;
        text-align: center;
        padding:15px;
        box-sizing: border-box;
        border-top: 1px solid #ccc;
    }
    .mbtn.que{
        border-left: 1px solid #ccc;
        color:red;
    }
</style>
<body>
<div class="top">
    <div class="top_li">
        <div class="name active">浏览</div>
        <div class="red active"></div>
    </div>
<!--    <div class="xian active"></div>-->
<!--    <div class="top_li">-->
<!--        <div class="name ">短信验证</div>-->
<!--        <div class="red"></div>-->
<!--    </div>-->
    <div class="xian "></div>
    <div class="top_li">
        <div class="name">在线支付</div>
        <div class="red"></div>
    </div>
</div>
<div class="cont">
    <div class="tip">手机号码默认为投保人，后续发送验证码以此为准,务必保证正确，谢谢！</div>
    <div class="duanxin">
        <div class="dx_tit">短信验证码</div>
        <div class="dx_input"><input type="text" placeholder="请输入短信验证码"></div>
        <div class="dx_btn">发送验证码</div>
    </div>
</div>
<div class="tanchuang">
    发送验证码成功<br>
    请务必在此页面完成短信验<br>
    证码回填和验证
</div>
<div class="next_btnk">
    <div class="next_btn">下一步</div>
</div>

<div class="model_k">
    <div class="model">
        <div class="model_val">
            <div class="model_tit">签名授权</div>
            <div class="model_tip">
                您同意采用电子签名的方式签订本次协议，并同意由您本人或授权他人向北京数字认证股份有限公司申请电子签名认证证书，自愿遵守其电子认证业务规则。请您保证提交的申请资料真实、准确、完整，并愿意承担由于资料虚假失实而导致的一切后果。
            </div>
            <div class="model_btn">
                <div class="mbtn" id="close">取消</div>
                <div class="mbtn que" id="queding">确定</div>
            </div>
        </div>

    </div>
</div>
</body>
<script type="application/javascript" src="./js/jquery.min.js"></script>
<script>
    $(".dx_btn").click(function(){
        $(".tanchuang").show()
        setTimeout(function(){
            $(".tanchuang").hide()
        },2000)
    })
    $("#close").click(function(){
        $(".model_k").hide()
    })
    $("#queding").click(function(){
        $(".model_k").hide()
    })
</script>
</html>